.sp-doctor {

	&__ {

		// 卡片 详情/咨询用到
		&card {
			padding: 28rpx 24rpx;
			background: #EFF5FF;
			border-radius: 0px 0px 20rpx 20rpx;

			&- {

				&header {
					.radius(20);
					.shadow(0px 0px 26rpx 0px rgba(0,0,0,0.06));
					.back-color(#fff);

					.sp-doctor__item {
						border-bottom: 1px solid #eee;
						align-items: center;

						&-pics {
							.square(120);
							margin-right: 30rpx;

							image {
								.circle(120, 120, 50%);
							}
						}

						&-name {
							label {
								.font(42, 50, #222);
							}

							text {
								.font(28, 40, #666);
							}
						}

						&-control {
							.f-center();
							.circle(130, 52, 26rpx);
							.back-color(#EFF5FF);
							margin-left: 30rpx;

							image,
							text {
								display: block;
							}

							image {
								.square(30);
								margin-right: 4rpx;
							}

							text {
								.font(28, 40, #6582F9, left);
							}

							&.active {
								.back-color(#F9FAFB);

								text {
									color: #ddd;
									text-align: center;
								}
							}
						}
					}
				}

				&info {
					padding: 0 24rpx 24rpx;
				}

				&name {
					.flex();

					image {
						display: block;
						.square(34);
						margin-right: 8rpx;
					}

					text {
						.font(27, 44, #222);
					}
				}

				&control {
					.flex();
					margin: 12rpx 0 24rpx;

					& > view {
						.flex();
						width: 190rpx;

						label {
							.font(24, 40, #bbb, left);
							margin-right: 16rpx;
						}

						text {
							.font(30, 40, #222, left);
						}
					}
				}

				&desc {
					position: relative;
					.font(26, 36, #bbb, left);
					.text-row-overflow();

					& > view {
						position: absolute;
						bottom: 0;
						right: 0;
						.size(60, 36);
						.font(20, 36, #6582F9);
						.back-color(#EFF5FF);

						&:after {
							content: '';
							position: absolute;
							bottom: 0;
							right: 60rpx;
							.size(100, 36);
							background: linear-gradient(to left, #fff, rgba(255, 255, 255, .5));
						}
					}
				}

				&notice {
					.flex();
					.circle(702, 70, 35rpx);
					margin-top: 28rpx;
					.boxing();
					padding: 0 64rpx 0 24rpx;
					background: #fff url('@{cdn}member/arrow.png') 664rpx center no-repeat;
					background-size: 20rpx;

					label {
						.font(26, 38, #FB9535, left);
						padding-left: 43rpx;
						background: url('@{cdn}doctor/icon-notice.png') left center no-repeat;
						background-size: 36rpx;
					}

					text {
						flex: 1;
						flex-shrink: 1;
						flex-grow: 1;
						padding-left: 20rpx;
						.font(26, 38, #666, left);
					}
				}

				&change {
					.f-center-space();
					margin: 28rpx 0 0;

					&-item {
						.size(342, 66);
						// .back-color(#fff);
						.text-overflow-one();
						padding: 0 54rpx 0 18rpx;
						.boxing();
						.font(28, 66, #222, left);
						background: #fff url('@{cdn}doctor/arrow.png') 304rpx center no-repeat;
						background-size: 20rpx;
					}
				}
			}
		}

		// 详情
		&detail {

			&- {

				&item {
					.flex();
					padding: 0 24rpx;
					.circle(702, 150, 20rpx);
					background: #fff url('@{cdn}member/arrow.png') 658rpx center no-repeat;
					background-size: 30rpx;
					.boxing();
					margin: 24rpx auto 0;

					&:nth-child(1) {
						image {
							.size(77, 76);
						}
					}

					&:nth-child(2) {
						image {
							.size(80, 75);
						}
					}
				}

				&pics {
					.square(80);
					margin-right: 24rpx;

					image {
						display: block;
						margin: 0 auto;
					}
				}

				&info {
					flex: 1;

					& > text {
						display: block;
						margin-bottom: 12px;
						.font(32, 46, #333, left);
					}
				}

				&tags {
					.font(26, 38, #bbb, left);

					text {
						position: relative;
						padding-right: 40rpx;

						&:not(:first-child):after {
							content: '';
							position: absolute;
							left: -20rpx;
							top: 9rpx;
							.size(1, 20);
							.back-color(#bbb);
						}
					}
				}

				&title {
					.f-center-space();
					padding: 0 24rpx;
					margin-top: 40rpx;

					& > text {
						.font(28, 40, #6582F9);
					}

					&-name {
						position: relative;
						padding-left: 24rpx;

						&:after {
							content: '';
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							.size(8, 32);
							background: linear-gradient(180deg, #6582F9 0%, rgba(101,130,249,0) 100%);
							.radius(6);
						}

						label {
							.font(34, 48, #222);
						}

						text {
							padding-left: 20rpx;
							.font(24, 48, #bbb);
						}
					}
				}

				&empty {
					padding: 82rpx 0;
				}
			}
		}

		// 简介
		&intro {
			width: 702rpx;
			margin: 24rpx;
			padding: 0 24rpx;
			.back-color(#fff);
			.boxing();

			&- {

				&boxes {
					padding: 24rpx 0;

					&:not(:first-child) {
						border-top: 1px solid #eee;
					}

					& > label {
						.font(32, 46, #222);
					}
				}

				&content {
					margin-top: 16rpx;
					.font(30, 50, #666, left);
				}
			}
		}

		// 筛选
		&filter {
			position: relative;
			z-index: 1;
		}

		&fixed {
			position: fixed;
			// top: calc(var(--status-bar-height) + 44px);
			top: 0;
			left: 0;
			z-index: 9;

			& + .sp-doctor__list {
				padding: 24rpx;
			}
		}

		// 列表
		&list {
			padding: 24rpx;
		}

		&item {
			display: flex;
			align-items: flex-start;
			// .circle(702, 220, 20rpx);
			.radius(20rpx);
			.back-color(#fff);
			.boxing();
			padding: 24rpx;
			margin-bottom: 24rpx;

			&- {

				&pics {
					.square(86);
					margin-right: 18rpx;
					background: url('@{cdn}member/avatar.png') center no-repeat;
					background-size: cover;

					image {
						display: block;
						.circle(86, 86, 50%);
					}
				}

				&info {
					flex: 1;
					flex-shrink: 1;
					flex-grow: 1;
				}

				&name {
					.flex();

					label {
						.font(30, 42, #222, left);
					}

					text {
						padding-left: 20rpx;
						.font(26, 42, #666, left);
					}
				}

				&tags {
					.flex();
					margin-top: 12rpx;

					text {
						display: block;
						margin-right: 20rpx;
						font-size: 20rpx;
						padding: 4rpx 8rpx;
						border: 1rpx solid;
						border-radius: 6rpx;

						&.type1 {
							color: #40BF5F;
							border-color: #40BF5F;
						}

						&.type2 {
							color: #FF811E ;
							border-color: #FF811E ;
						}
					}
				}

				&data {
					.flex();
					margin-top: 12rpx;

					text {
						.font(26, 40, #666);

						&:first-child {
							color: #FF811E;
							margin-right: 20rpx;
						}
					}
				}

				&dept {
					margin-top: 8rpx;

					text {
						padding-right: 20rpx;
						.font(24, 40, #666, left);
					}
				}

				&desc {
					margin-top: 8rpx;
					.font(26, 38, #bbb, left);
					.text-row-overflow();
					min-height: 76rpx;
				}
			}
		}

		// 排班
		&work {
			padding: 0 24rpx;

			&- {

				&alert {
					height: 88rpx;
					padding-left: 38rpx;
					background: url('@{cdn}doctor/warning.png') left center no-repeat;
					background-size: 26rpx;
					.font(28, 88, #FF5F5F, left);
				}

				&item {
					.flex();
					.circle(702, 224, 20rpx);
					margin-bottom: 24rpx;
					padding: 28rpx 24rpx;
					.boxing();
					.back-color(#fff);
				}

				&info {
					flex: 1;
					padding-right: 24rpx;
				}

				&name {
					.flex();
					.font(32, 46, #222, left);

					text {
						display: block;
						.font(20, 20, #666);
						padding: 8rpx;
						.back-color(#f6f6f6);
						margin-left: 20rpx;
					}
				}

				&dept {
					.font(28, 40, #666, left);
					margin: 12rpx 0 24rpx;
				}

				&nums {
					.flex();
					.font(32, 46, #FF811E, left);

					text {
						display: block;
						margin-left: 12rpx;
						.font(24, 46, #bbb, left);
					}
				}

				&btns {

					.sp-button {
						.circle(120, 60, 10rpx);
						line-height: 58rpx;
						text-align: center;

						&__ {

							&primary {
								color: #fff;
							}
						}
					}
				}
			}
		}
	}
}

.sp-search + .sp-doctor__filter {
	background: #fff;
	margin-top: -2rpx;
	padding-top: 2rpx;

	.navs {
		border-top: 1px solid #eee;
	}
}

.sp-doctor__filter + .sp-doctor__list {
	margin-top: 86rpx;
}
